<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bootstrap test</title>
<!--<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">-->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<style>
<!--.container h1{color:#F63;}-->
ul li{class="list-unstyled"}	
table{border:1px solid #F33;width:100px;height:200px;}
.table-hover{background:#F9F;text-align:center;font-weight:bold;}
.table-hover tr :hover{background:#C63;}

</style>
</head>
<!--<script src="js/jquery-1.4.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>-->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<body>

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
选择你喜欢的水果
 <span class="caret"></span>
</button>
<ul class="dropdown-menu"  role="menu" aria-labelledby="dropdownMenu1">
<li><a href="#">香蕉</a></li>
<li><a href="#">苹果</a></li>
<li><a href="#">鸭梨</a></li>
<li class="divider"></li>
<li><a href="#">香蕉</a></li>
<li><a href="#">苹果</a></li>
<li><a href="#">鸭梨</a></li>
<li><a href="#">香蕉</a></li>
<li><a href="#">苹果</a></li>
<li><a href="#">鸭梨</a></li>
</ul>
</div>













<span class="glyphicon glyphicon-search"></span>
 <button class="btn" type="button">基础按钮.btn</button>  
   <button class="btn btn-default" type="button">默认按钮.btn-default</button> 
   <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> 
   <button class="btn btn-success" type="button">成功按钮.btn-success</button> 
   
   <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> 
   <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> 
   <button class="btn btn-link" type="button">链接按钮.btn-link</button> 



<table class="table table-bordered">
  <thead>
    <tr>
      <th>类名</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>.active</td>
      <td>表示当前活动的信息</td>
    </tr>
    <tr class="success">
      <td>.success</td>
      <td>表示成功或者正确的行为</td>
    </tr>
    <tr class="info">
      <td>.info</td>
      <td>表示中立的信息或行为</td>
    </tr>
    <tr class="warning">
      <td>.warning</td>
      <td>表示警告，需要特别注意</td>
    </tr>
    <tr class="danger">
      <td>.danger</td>
      <td>表示危险或者可能是错误的行为</td>
    </tr>
  </tbody>
</table> 






<table class=" table table-hover" border="1px" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">AAA</td>
</tr>
<tr>
<td>BBB</td><td>BBB</td><td>BBB</td>
</tr>
<tr>
<td>CCC</td><td>CCC</td><td>CCC</td>
</tr>
</table>
<p>
<cite>《富春山居图》</cite>由黄公望始画于至正七年(1347)，于至正十年完成。
</p>
<s>HTML标签属性</s>
<h4>Bootstrap标题一<small style="color:#FC3;">我是副标题</small></h4>
<!--Bootstrap中让非标题元素和标题使用相同的样式-->
<div class="pull-right">Bootstrap标题二</div>
<div class="text-success">Bootstrap标题三</div>
<div>Bootstrap标题四</div>
<div>Bootstrap标题五</div>
<div>Bootstrap标题六</div>


<kbd>用户输入代码</kbd>

<code>
超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手
</code>

<pre>
超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手
超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手
超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手
超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手
</pre>

<ul>
<li class="list-unstyled">互联网</li>
<li class="list-inline">互联网</li>
<li>互联网</li>
</ul>
    
<dl>
    <dt>定义列表标题</dt>
    <dd>定义列表信息1</dd>
    <dd>定义列表信息2</dd>
</dl>





<!--<div class="container" >
<h1>哈吉尔覅偶经费平均可分为偶见击破飞机迫降</h1>
<p>放薄荷等服务区别呢绝对不会</p>
<div class="row">
<div class="col-md-5">
<h1>哈吉尔覅偶经费平均可分为偶见击破飞机迫降</h1>
<p>放薄荷等服务区别呢绝对不会</p>
</div>
<div class="col-md-5">
<h1>哈吉尔覅偶经费平均可分为偶见击破飞机迫降</h1>
<p>放薄荷等服务区别呢绝对不会</p>
</div>
</div>
</div>-->
</body>
</html>
